<template>
  <!-- 应急演练计划 -->
  <base-breadcrumb>
    <searchData :searchData="searchOptions" @search2="search" />

    <div class="page-body">
      <a-card :bordered="false">
        <!-- <title-name title="应急演练计划" /> -->
        <div class="table-operateors mb20">
          <a-button type="primary" @click="addPlan('add')" icon="plus" v-btnPermission="'hse_017_add_01'">
            新增上报
          </a-button>
        </div>
        <!-- 统计 -->
        <div class="pub-table-select-count">
          <a-icon type="info-circle" theme="twoTone" />
          <span style="margin-right: 12px"> 应急演练计划总数：
                    <span class="totalNum">{{ totalDetails.total }}</span> 个  |
                    待提交 <span class="totalNum">{{ totalDetails.draft }}</span> 个  |
                    已提交 <span class="totalNum">{{ totalDetails.submitted }}</span> 个
            <!-- |
           审核通过 <span class="totalNum">{{totalDetails.past}}</span> 个  |
           审核不通过 <span class="totalNum">{{totalDetails.rejected}}</span> 个 -->
                  </span>
        </div>
        <!-- 统计 -->
        <list-table
          ref="table"
          size="default"
          rowKey="key"
          :columns="columns"
          :request="loadData"
          :alert="true"
          show-size-changer
          show-quick-jumper
          showPagination="auto"
        >
          <span slot="sort" slot-scope="text, record, index">{{ index + 1 }}</span>
          <template slot="auditStatus" slot-scope="text, record">
            <list-status :status="record.auditStatus" conversion="en" :text="text"></list-status>
          </template>
          <template slot="operator" slot-scope="text, record">
            <MoreButton>
            <a class="base-btn" @click="goDetailPlan(record)" v-btnPermission="'hse_017_loo_04'">查看</a>
            <a
              class="base-btn"
              v-if="record.auditStatus == 'DRAFT' && !record.report"
              @click="editPlan(record)"
              v-btnPermission="'hse_017_edi_02'"
            >编辑</a>
            <a
              class="base-btn"
              @click="handleUpdate('del', record)"
              v-btnPermission="'hse_017_del_03'"
            >删除</a>
            </MoreButton>
          </template>
        </list-table>
      </a-card>
    </div>
  </base-breadcrumb>
</template>

<script>
import { STable } from '@/components'

import { getEmergencyPlanList, getEmergencyPlanCount, deletePlan } from '@/api/safetySupervision/emergencyDrill'
import ThemeChoose from '@/components/themeChoose/themeChoose.vue'
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject' // 项目
import OrgTreeSelect from '@/components/OrgTreeSelect'
import api from 'ant-design-vue/es/notification'

const searchOptions = [
  {
    name: '所属单位',
    valueKey: 'searchQuery',
    type: OrgTreeSelect,
  },
  // {
  //   name: '所属分公司',
  //   valueKey: 'branchComId',
  //   type: SelectSubCompany
  // },
  // {
  //   name: '所属项目',
  //   keyValue: 'branchComId',
  //   valueKey: 'projectId',
  //   showSearch: true,
  //   type: SelectProject
  // },
  {
    name: '填报人',
    value: 'creatorString',
    type: 'input'
  },
  {
    name: '填报时间',
    value: 'applyTime',
    type: 'dateRange'
  },
  {
    name: '状态',
    value: 'auditStatus',
    type: 'select',
    data: [
      {
        value: 'DRAFT',
        label: '草稿'
      },
      {
        value: 'SUBMITTED',
        label: '已提交'
      }
    ]
  }
]
const columns = [
  {
    title: '序号',
    dataIndex: 'sort',
    scopedSlots: { customRender: 'sort' }
  },
  {
    title: '名称',
    dataIndex: 'name'
  },
  {
    title: '所属分公司',
    dataIndex: 'branchComName'
  },
  {
    title: '所属项目',
    dataIndex: 'projectName'
  },
  {
    title: '填报人',
    dataIndex: 'creator'
  },
  {
    title: '填报时间',
    dataIndex: 'createTime'
  },
  {
    title: '状态',
    dataIndex: 'auditStatus',
    scopedSlots: { customRender: 'auditStatus' }
  },
  {
    title: ' 操作',
    dataIndex: 'operator',
    fixed: 'right',
    width: 150,
    scopedSlots: { customRender: 'operator' }
  }
]
export default {
  name: 'a' + Date.now(), components: {
    STable
  },
  data() {
    this.searchOptions = searchOptions
    this.columns = columns
    return {
      queryParam: {},
      totalDetails: {
        total: 0,
        draft: 0,
        submitted: 0,
        past: 0,
        rejected: 0
      },
      loadData: async (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        this.getEmergencyPlanCount(requestParameters)
        const [err, res] = await getEmergencyPlanList(requestParameters)
        return new Promise((resolve, reject) => {
          if (err) {
            reject(err)
          } else {
            resolve(res)
          }
        })
      }
    }
  },
  methods: {
    //搜索
    search(val = {}) {
      const year = new Date().getFullYear()
      this.queryParam = {
        ...val,

        beginTime:
          (val.applyTime && val.applyTime.length && val.applyTime[0].format('YYYY-MM-DD HH:mm:ss')) || void 0,
        endTime:
          (val.applyTime && val.applyTime.length && val.applyTime[1].format('YYYY-MM-DD HH:mm:ss')) || void 0
      }

      this.$refs.table.refresh(true)
    },
    async getEmergencyPlanCount(param) {
      const [err, res] = await getEmergencyPlanCount(param)
      if (!err) {
        this.totalDetails = res.data
      }
    },
    async deletePlan(data) {
      const [err, res] = await deletePlan({ id: data.id })
      if (!err) {
        this.$message.success('成功')
        this.$refs.table.refresh(true)
      }
    },
    async handleUpdate(type, data = {}) {
      let that = this
      this.$confirm({
        title: '温馨提示',
        content: '确定是否删除数据？',
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk: () => {
          return that.deletePlan(data)
        }
      })
    },
    // 处理更新操作（新增、编辑）
    addPlan(type, data = {}) {
      this.$router.push({
        name: 'UpdateEmergencyPlan',
        query: {
          id: '',
          pageType: 'add'
        }
      })
    },
    editPlan(data) {
      this.$router.push({
        name: 'UpdateEmergencyPlan',
        query: {
          id: data.id || '',
          pageType: 'edit'
        }
      })
    },
    goDetailPlan(data) {
      console.log(data)
      this.$router.push({
        name: 'UpdateEmergencyPlan',
        query: {
          id: data.id || '',
          pageType: 'look'
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.page-header {
  .header-row {
    display: flex;

    .flex-content {
      flex: auto;
    }

    .divider {
      margin: 0 12px;
    }

    .expand-btn {
      margin-left: 8px;
      font-size: 14px;
    }
  }
}

.page-body {
  .table-operateors {
    .ant-btn + .ant-btn {
      margin-left: 12px;
    }
  }
}
</style>